<template>
    <div class="orderDailyContainer">
        <div class="orderDaily">
            <div class="header">
                <div class="selectDate">
                    <div class="block">
                        <span class="demonstration" style="display:inline-block;text-align:center;width:80px">开始日期</span>
                        <el-date-picker
                            size="medium"
                            v-model="orderTime"
                            type="date"
                            placeholder="请选择"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                    <div class="block">
                        <span class="demonstration" style="display:inline-block;text-align:center;width:80px">结束日期</span>
                        <el-date-picker
                            size="medium"
                            v-model="orderTime"
                            type="date"
                            placeholder="请选择"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                    <div  class="block"> 
                        <span>订单平台</span>
                        <el-select v-model="channelCode" placeholder="请选择" size="medium">
                            <el-option
                            v-for="item in list"
                            :key="item.id"
                            :label="item.channelName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="consignee">
                    <div class="consigneeName">
                        <label >商品名称</label>
                        <el-input type="text" placeholder="请输入商品名称" v-model="channelItemName" size="medium"></el-input>
                    </div>
                    <div class="consigneeName">
                        <label>订单公司</label>
                        <el-select v-model="companyCode" placeholder="请选择" size="medium">
                            <el-option
                            v-for="item in list"
                            :key="item.id"
                            :label="item.companyName"
                            :value="item.companyCode">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="consigneeName">
                        <el-button type="primary"  plain size="small" style="margin-left:10px">查询</el-button>
                        <el-button   plain  size="small">重置</el-button>
                        <el-button   plain  size="small">导出</el-button>
                    </div>
                </div>
            </div>
              <div class="orderDailyTable">
                <el-table
                    :data="figureTable"
                    border
                    :header-cell-style="getRowClass"
                    style="width: 100%">
                    <el-table-column
                    prop="purBillsDate"
                    label="订单日期"
                    width="180"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="companyName"
                    label="订单平台"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="supplyName"
                    label="订单公司"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="price"
                    label="商品名称"
                    width="80"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="null"
                    label="商品Sku"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="null"
                    label="数量"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="number"
                    label="销售额"
                     align="center">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="销售额占比"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="单件毛利"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="利润"
                    align="center">
                    </el-table-column>
                     <el-table-column
                    prop="name"
                    label="利润率"
                    align="center">
                    </el-table-column>
                     <el-table-column
                    prop="name"
                    label="毛利占比"
                    align="center">
                    </el-table-column>
                     <el-table-column
                    prop="name"
                    label="平台销售总额"
                    align="center">
                    </el-table-column>
                     <el-table-column
                    prop="name"
                    label="平台总利润"
                    align="center">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data(){
        return{
            list:[],
            figureTable:[],
            loading2:false,
            channelCode:'',
            companyCode:'',
            orderTime:'',
            channelItemName:'',
            loading2:false
        }
    },
    created(){
        this.orderFlat()
    },
    methods:{
        orderFlat(){
            let parmas={
                pageIndex:1,
                pageSize:10
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.list=data.data
                } else{
                    this.$message.error(data.msg)
                }   
            }
            api.channelList(parmas,success)
        },
          //设置表格第一行的颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return 'background:#3a8eef;color:#fff'
            } else {
                return ''
            }
        },
    },
   
}
</script>
<style lang="scss">
.orderDailyContainer{
    width:99%;
    height:100%;
    .orderDaily{
        margin-left:20px;
        .header{
            height:auto;
            background:#fff;
            .selectDate{
                display: flex;
                width:100%;
                .block{
                    margin-top:10px;
                    flex:1;
                    span{
                        color:#606266;
                        font-size:15px;
                    }
                    .el-input{
                        height:40px;
                        width:218px;
                    }
                }
            }
            .consignee{
                display: flex;
                width:100%;
                .consigneeName{
                    flex:1; 
                    margin:11px 0;
                    .el-input{
                        height:40px;
                        width:218px;
                    }
                    label{
                        width: 80px;
                        display: inline-block;
                        text-align: center;
                        color:#606266;
                        font-size:15px;
                    }
                }
            }
        .order{
            display:flex;
                .orderNo{
                    margin-left:20px;
                    flex:1;
                    label{
                        width: 87px;
                        display: inline-block;
                    }
                    .el-input{
                        height:40px;
                        width:218px; 
                    }
                }
            }
        }
    }
}
</style>
